<template>
    <z-paging ref="paging" v-model="recordList" @query="queryList">
        <u-sticky>
            <hedsty :headCentext="'中赏记录'"></hedsty>
            <view class="hedongtab">
                <view class="dange_hedx_box" :class="hdtabId == item.id ? 'dange_hedx_box1' : ''"
                    v-for="(item, index) in hdTabList" :key="index" @click="tabsBtn(item)">
                    {{ item.text }}
                </view>
            </view>
        </u-sticky>
        <template v-if="hdtabId == 2">
            <view class="list_box" v-for="(item, index) in recordList" :key="index"
            :style="{ backgroundImage: 'url(' + (tabsId == 1 ? 'https://morgan.dingxians.cn/static/copup/3.png' : 'https://morgan.dingxians.cn/static/copup/3.png') + ')' }">
            <view class="left_box">
                <image :src="item.box_prize_image" mode="scaleToFill" />
            </view>
            <view class="center_box">
                <view class="top_one_bbox">{{ item.box_name }}</view>
                <view class="top_two_bbox">正品保障 极速提货 满六件包邮</view>
                <view class="top_thr_bbox">{{ item.box_prize_name }}</view>
            </view>
        </view>
        </template>
        <template v-else>
            <view class="flw_con_box" v-for="(items, indexs) in recordList" :key="indexs"
            @click="$router('/userPage/fuyuri/flwDetail?id=' + items.weal_rooms_id)">
            <view class="flwk_box" style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/3.png');">
                <view class="quees">
                    <!--实际数据组 GO-->
                    <view class="quee" v-for="item, index in items.prize_list" :key="index">
                        <image :src="item.image" mode="heightFix"></image>
                    </view>
                    <!--填充数据组 GO-->
                    <view class="quee" v-for="item, index in items.prize_list" :key="index">
                        <image :src="item.image" mode="heightFix"></image>
                    </view>
                </view>
                <view class="flw_name_box" style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/4.png');">
                    <view class="touxiang_box">
                        <image :src="items.avatar" mode="scaleToFill" />
                    </view>
                    <view class="zs_name_box">{{items.nickname}}</view>
                    <view class="zs_jianshu_box">件数：{{ items.prize_num }}</view>
                    <view class="zs_redu_box">热度：{{ items.begin_reward_num }}</view>
                </view>
                <view class="jion_box" v-if="items.is_finish == 1" style="background-image: url('https://morgan.dingxians.cn/upload/20241125/67442dcc9dcbd.png');background-size: 100% 100%;">
                    进行中
                </view>
                <view class="jion_box" v-if="items.is_finish == 2" style="background-image: url('https://morgan.dingxians.cn/upload/20241125/67442dcc9dcbd.png');background-size: 100% 100%;">
                    已结束
                </view>
            </view>
        </view>
        </template>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            recordList: [],
            hdTabList: [
                {
                    id: 1,
                    text: '参与记录'
                },
                {
                    id: 2,
                    text: '中奖记录'
                },
            ],
            hdtabId: 1,
        }
    },
    onLoad() {

    },
    onShow() {

    },
    methods: {
        tabsBtn(item) {
            this.hdtabId = item.id
            this.$refs.paging.reload()
        },
        queryList(pageNo, pageSize) {
            if (this.hdtabId == 1) {
                
                let data = {
                    page: pageNo,
                    limit: pageSize
                }
                this.$Request.get(this.$api.flw.wealRoomsOrdersPrizesMyParticipation, data).then(res => {
                    if (res.code == 200) {
                        this.$refs.paging.complete(res.data.data)
                    }
                })
            } else {
                let data = {
                    page: pageNo,
                    limit: pageSize
                }
                this.$Request.get(this.$api.flw.wealRoomsOrdersPrizesDrawRecord, data).then(res => {
                    if (res.code == 200) {
                        this.$refs.paging.complete(res.data.data.data)
                    }
                })
            }

        },
    }
}
</script>
<style lang="scss" scoped>
.hedongtab {
    width: 100%;
    height: 80rpx;
    box-sizing: border-box;
    padding-left: 23rpx;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 30rpx;

    .dange_hedx_box {
        width: 161rpx;
        height: 80rpx;
        background-size: 100% 100%;
        margin-right: 20rpx;
        font-family: text1;
        font-weight: normal;
        font-size: 30rpx;
        color: rgba(255, 255, 255, .4);
        line-height: 80rpx;
        font-style: italic;
        text-align: center;

        &.dange_hedx_box1 {
            font-family: text1;
            font-weight: normal;
            font-size: 30rpx;
            color: #EED52E;
            font-style: italic;
        }
    }
}

.list_box {
    width: 690rpx;
    margin: auto;
    height: 210rpx;
    background-size: 100% 100%;
    padding: 35rpx 28rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin-bottom: 50rpx;

    .left_box {
        width: 140rpx;
        height: 140rpx;
        background: #09040A;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;

        image {
            width: 140rpx;
            height: 140rpx;
        }
    }

    .center_box {
        height: 140rpx;
        box-sizing: border-box;
        padding-top: 7rpx;

        .top_one_bbox {
            height: 27rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 27rpx;
            margin-bottom: 26rpx;
        }

        .top_two_bbox {
            width: 272rpx;
            height: 19rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #FFFFFF;
            line-height: 19rpx;
            margin-bottom: 26rpx;
        }

        .top_thr_bbox {
            width: 90%;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFEDD7;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}


.flw_con_box {
    width: 690rpx;
    height: 318rpx;
    margin: auto;
    margin-bottom: 33rpx;
    position: relative;

    .flwk_box {
        width: 100%;
        // width: 180rpx;
        height: 290rpx;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding-top: 45rpx;
        overflow: hidden;

        .quees {
            width: 180rpx;
            height: 200rpx;
            animation: move 7s linear infinite;
            white-space: nowrap;
            // margin-top: 20rpx;

            .quee {
                max-width: 180rpx;
                height: 200rpx;
                overflow: hidden;
                border-radius: 12rpx;
                display: inline-block;
                margin-right: 20rpx;    

                image {
                    width: 180rpx;
                    height: 200rpx;
                }
            }
        }

        // .quees:hover {
        // 	animation: move 7s linear infinite paused;
        // }

        @keyframes move {

            0% {
                transform: translateX(0rpx);
            }

            100% {
                //无缝重点：图片是300rpx，margin-right是20rpx，那就是需要左移 （300+20）*图片数rpx
                transform: translateX(-600rpx);
            }

        }

        .tupian_pic_box {
            width: 100%;
            height: 200rpx;
            box-sizing: border-box;
            padding-left: 30rpx;
            display: flex;
            justify-content: flex-start;
            overflow: hidden;
            overflow-x: auto;

            image {
                display: block;
                height: 100%;
                flex-shrink: 0;
            }
        }
    }

    .flw_name_box {
        position: absolute;
        width: 470rpx;
        height: 90rpx;
        background-size: 100% 100%;
        bottom: 0;
        left: -20rpx;
        box-sizing: border-box;
        padding-left: 45rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .touxiang_box {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            margin-right: 12rpx;

            image {
                width: 50rpx;
                height: 50rpx;
                border-radius: 50%;
            }
        }

        .zs_name_box {
            width: 79rpx;
            height: 90rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #FFFFFF;
            line-height: 90rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 12rpx;
        }

        .zs_jianshu_box {
            height: 90rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #FFFFFF;
            line-height: 90rpx;
            margin-right: 12rpx;
        }

        .zs_redu_box {
            height: 90rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #FFFFFF;
            line-height: 90rpx;
        }
    }

    .jion_box {
        width: 164rpx;
        height: 90rpx;
        position: absolute;
        bottom: 0;
        right: 12rpx;
        font-family: text1;
            font-weight: normal;
            font-size: 30rpx;
            color: #EED52E;
            font-style: italic;
            text-align: center;
            line-height: 90rpx;
    }
}
</style>